<template>
  <div class="userManage">
    <div class="left">
      <company></company>
    </div>
    <div class="right">
      <!-- 搜索模块 -->
      <!-- <div class="searchModule"> -->
        <el-form class="searchTop">
          <el-form-item label="用户名称">
            <el-input placeholder="请输入用户名称" v-model="search.userName">
            </el-input>
          </el-form-item>
          <el-form-item label="手机号码">
            <el-input placeholder="请输入手机号码" v-model="search.telephone">
            </el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="search.status" placeholder="用户状态">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                value-format="yyyy-MM-dd"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="search.timeValue"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div class="searchBottom">
          <el-button type="primary" icon="el-icon-search" @click="handleSearch"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" @click="handleReset"
            >重置</el-button
          >
        </div>
      <div class="tableModule">
        <!-- 表格模块 -->
        <tableModule ref="tableModule" ></tableModule>
      </div>
      </div>
      
    </div>
  </div>
</template>

<script>
import company from "./company";
import { fetchList } from '@/api/newuser'
import tableModule from "./tableModule";
export default {
  components: { company, tableModule },
  data() {
    return {
      search:{
        userName: "",
        telephone: "",
        status: null,
        timeValue: []
      },
      searchInfo:{},//点击搜索，将搜索框内搜索对象search赋值给新对象searchinfo，searchinfo是用props传值所定义的新对象
      options: [
        {
          value: 1,
          label: "正常"
        },
        {
          value: 0,
          label: "停用"
        }
      ]
    };
  },
  watch: {
    // 监听对象和数组，需要深度监听
    // searchInfo: {
    //   handler:function(val, oldval) {
    //     console.log("监听",val)
    //   },
    //   deep: true,
    //   immediate: true
    // }
  },
  methods: {
    // 设置日期选择器的初始日期
    month(){
      let startTime=this.getDataInfo(new Date().getTime())
      let endTime=this.getDataInfo(new Date().getTime()-7*24*60*60*1000)

      this.search.timeValue.push(endTime)
      this.search.timeValue.push(startTime)
      
    },
    handleSearch() {
      this.$refs.tableModule.changeParams(this.search)
    },
    handleReset() {
      this.search ={
        userName: "",
        telephone: "",
        status: null,
        timeValue: []
      },
      this.month()
    }
  },
  created(){
    this.month()

  },
  mounted() {
    this.$refs.tableModule.changeParams()
  }
};
</script>
<style lang="scss">
.userManage {
  display: flex;
  .left {
    width: 20%;
    height: 100%; //子元素高度自适应，无法设置
    // background-color:red;
  }
  .right {
    margin-top: 20px;
    width: calc(100% - 20%);
    // background-color:skyblue;
    .el-form.searchTop {
      .el-form-item {
        display: inline-block;
        width: 20%;
        .el-form-item__content {
          display: inline-block;
          width: 70%;
        }
      }
    }
    .searchBottom {
      margin-bottom: 20px;
    }
  }
}
</style>
